import {Button, Descriptions, Modal, Table, Typography} from 'antd'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import React, {useState, useEffect} from 'react'
import {connect} from 'umi'
import moment from 'moment'
import { getScoreInfo } from '../../service'
import { ratingStatus, ratingTypes, personRatingStatus } from "@/utils/constant";
import ScoreDetail from "@/pages/ScoreOf360/List/components/ScoreDetail";

const DescriptionsItem = Descriptions.Item;
const {Text} = Typography;

const Detail = ({ visible, onCancel, current, currentUser }) => {

  const { authorities } = currentUser
  const [info, setInfo] = useState(null);
  const [ratingDetailsData, setRatingDetailsData] = useState([]);
  const [gradingProgressData, setGradingProgressData] = useState([]);
  const [scoreDetailVisible, setScoreDetailVisible] = useState(false);
  const [scoreDetail, setScoreDetail] = useState({});

  useEffect(()=>{
    if (visible && current){
      getScoreInfo(current.id).then(res => {
        if (res){
          let { scoreTopicDtoList, scoreRaterEntityList, ...restData } = res;
          setInfo(restData);
          setRatingDetailsData(scoreTopicDtoList.map(item => ({key:item.id,...item})));
          setGradingProgressData(scoreRaterEntityList.map(item => ({key:item.id,...item})));
        }
      })
    }
  },[visible]);

  const ratingDetailsColumns = [
    {
      title: '题号',
      key: 'index',
      render: (text,record,index) => index+1
    },
    {
      title: '评分项目',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '加权平均分',
      align: 'right',
      dataIndex: 'averageScore',
      key: 'averageScore',
    }
  ];

  const gradingProgressColumns = [
    {
      title: '评分时间',
      dataIndex: 'scoreTime',
      render: text => {
        return text !=='-' && moment(text).format('YYYY-MM-DD HH:mm')
      }
    },
    {
      title: '评分人',
      dataIndex: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        0: { text: personRatingStatus[0].label, status: 'Processing' },
        1: { text: personRatingStatus[1].label, status: 'Success' },
        2: { text: personRatingStatus[2].label, status: 'Error' },
      },
    },
    {
      title: '评分关系',
      dataIndex: 'type',
      render: text => {
        return text!==null && ratingTypes[text].label
      }
    },
    {
      title: '评分',
      dataIndex: 'raterScore',
      hideInTable: authorities.indexOf("score:raterScore:get") < 0
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInTable: authorities.indexOf("score:raterScore:get") < 0,
      render: (item, record) => (record.status===1 && <a onClick={() => showDetail(record)}>详情</a>),
    }
  ];

  const showDetail = (item) => {
    setScoreDetail(item);
    setScoreDetailVisible(true);
  };

  const onFormCancel = () => {
    setInfo(null);
    onCancel();
  };

  const scoreDetailCancel = () => {
    setScoreDetailVisible(false);
    setScoreDetail({});
  };

  const renderFooter = () => <><Button onClick={() => onFormCancel()}>关闭</Button></>;

  return (
    <Modal
      width='90%'
      destroyOnClose
      title="360评分详情"
      visible={visible}
      footer={renderFooter()}
      onCancel={onFormCancel}
    >
      <Descriptions title="被评分人信息">
        <DescriptionsItem label="工号">{info && info.code}</DescriptionsItem>
        <DescriptionsItem label="姓名">{info && info.name}</DescriptionsItem>
        <DescriptionsItem label="公司">{info && info.orgName}</DescriptionsItem>
        <DescriptionsItem label="部门">{info && info.unitName}</DescriptionsItem>
        <DescriptionsItem label="职位">{info && info.jobName}</DescriptionsItem>
        <DescriptionsItem label="完成率">{info && (`${info.appraisalTare?info.appraisalTare:0}%`)}</DescriptionsItem>
      </Descriptions>
      <Descriptions title="评分信息">
        <DescriptionsItem label="评分类型">{info && info.programName}</DescriptionsItem>
        <DescriptionsItem label="评分">{info && info.score}</DescriptionsItem>
        <DescriptionsItem label="评分状态">{info && ratingStatus[info.status].label}</DescriptionsItem>
        <DescriptionsItem label="实际评分人数">{info && info.appraisalNum}</DescriptionsItem>
        <DescriptionsItem label="应评分人数">{info && info.sum}</DescriptionsItem>
        <DescriptionsItem label="是否自评">{info && info.isAppraisal ? '是' : '否'}</DescriptionsItem>
      </Descriptions>
      <ProTable
        headerTitle='评分详情'
        search={false}
        options={false}
        dataSource={ratingDetailsData}
        columns={ratingDetailsColumns}
        pagination={false}
        /*summary={pageData => {
          let totalScore = 0;
          pageData.forEach(({averageScore}) => {
            totalScore += averageScore;
          });
          return (<>
              <Table.Summary.Row>
                <Table.Summary.Cell colSpan={2}>总计</Table.Summary.Cell>
                <Table.Summary.Cell align='right'>
                  <Text>{totalScore.toFixed(2)}</Text>
                </Table.Summary.Cell>
              </Table.Summary.Row>
            </>);
        }}*/
      />
      <ProTable headerTitle='评分进度' search={false} dataSource={gradingProgressData} columns={gradingProgressColumns} pagination={false} />
      <ScoreDetail
        visible={scoreDetailVisible}
        onCancel={scoreDetailCancel}
        current={scoreDetail}
      />
    </Modal>

  )
};

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Detail)
